<template>
  <div>
    <a-card style="margin-top: 12px;">
      <div>
        <a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 7}" :wrapperCol="{span: 17, offset: 0}">
          <div class="fold">
            <a-row>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="应用名称"
                  prop="name"
                >
                  <a-input v-model="form.name" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="应用路径"
                  prop="path"
                >
                  <a-input v-model="form.path" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="注册中心地址"
                  prop="zookeeperAddress"
                >
                  <a-input v-model="form.zookeeperAddress" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="应用地址"
                  prop="url"
                >
                  <a-input v-model="form.url" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type="flex" justify="end">
              <a-button @click="submitForm" type="primary">查询</a-button>
              <a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
            </a-row>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 12px;">
      <div>
        <standard-table
          ref="table"
          :size="`middle`"
          :page="page"
          :pageSize="pageSize"
          :total="total"
          :isPagination="false"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
        >
          <div slot="status">
            <a-badge status="success" text="在线" />
          </div>
        </standard-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import StandardTable from '@/components/table/standard-table'
import {applicationService} from '@/services'

const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    width: 80,
    scopedSlots: { customRender: 'no' }
  },
  {
    title: '应用名称',
    dataIndex: 'name',
    width: 200
  },
  {
    title: '应用路径',
    dataIndex: 'path',
    width: 300,
    ellipsis: true
  },
  {
    title: '注册中心地址',
    dataIndex: 'zookeeperAddress',
    width: 200,
    ellipsis: true
  },
  {
    title: '应用地址',
    dataIndex: 'url',
    width: 200,
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '启动时间',
    dataIndex: 'startTime',
    width: 160
  }
]
export default {
  name: 'Application',
  components: {StandardTable},
  data () {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: columns,
      dataSource: [],
      form: {
        name: undefined,
        path: undefined,
        zookeeperAddress: undefined,
        url: undefined
      }
    }
  },
  methods: {
    reloadTable() {
      this.queryListAction()
    },
    resetForm() {
      this.$refs.queryForm.resetFields()
      this.reloadTable()
    },
    submitForm() {
      this.reloadTable()
    },
    queryListAction() {
      this.loading = true
      const params = {
        name: this.form.name,
        path: this.form.path,
        zookeeperAddress: this.form.zookeeperAddress,
        url: this.form.url
      }
      applicationService.queryList(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.dataSource = []
          this.dataSource = result.data
        }
      }).finally(this.loading = false)
    }
  },
  created() {
    this.reloadTable()
  }
}
</script>
<style scoped lang="less">
  .ant-form-item {
    margin-bottom: 12px;
  }
  .fold{
    width: calc(100% - 12px);
    display: inline-block;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>